import { Bot, ChevronDown } from "lucide-react";
import { Button } from "./ui/button";

interface AgentSelectorProps {
  selectedAgent?: any;
  onAgentSelect: (agent: any) => void;
  className?: string;
}

export function AgentSelector({
  selectedAgent,
  onAgentSelect,
  className = "",
}: AgentSelectorProps) {
  return (
    <Button
      variant="outline"
      onClick={() => onAgentSelect?.(selectedAgent)}
      className={`h-8 md:h-9 justify-between bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-white/30 dark:border-slate-600/30 hover:bg-white dark:hover:bg-slate-800 text-xs md:text-sm ${className}`}
    >
      <div className="flex items-center space-x-1.5 md:space-x-2">
        <Bot className="w-3 h-3 md:w-4 md:h-4 text-blue-600 dark:text-blue-400" />
        <span className="font-medium text-slate-700 dark:text-slate-300 truncate max-w-[120px] md:max-w-none">
          {selectedAgent?.name || "选择助手"}
        </span>
      </div>
      <ChevronDown className="w-3 h-3 md:w-4 md:h-4 text-slate-500" />
    </Button>
  );
}
